/*--------------------------------------------- 组件样式 -------------------------------------------------*/

@charset "utf-8";
// 公共颜色
@baseColor: #666;
//公共a标签色值
@linkcolor: #333;


// -webkit-transform: rotate(5deg) translateZ(0);
// translateZ(0)可以清除css3属性带来的锯齿
// 单行文本
.singleline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 公共圆角
.radius(@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

//公共阴影
// @第一个值 右边阴影为正数 左边负数
// @第二个值 下边阴影为正数 上边负数
// @第三个值  阴影大小
// @第四个值 阴影颜色

.boxshadow(@arguments){
    -webkit-box-shadow:@arguments;
    -moz-box-shadow:@arguments;
    box-shadow:@arguments;
}


// 文字阴影：同上盒子阴影
.textshadow(@arguments) {
    text-shadow: @arguments;
    -moz-text-shadow:@arguments;
    -webkit-text-shadow:@arguments;
}

//公共动画效果
.animation(@args) {
    -webkit-animation: @args;
    -moz-animation: @args;
    -ms-animation: @args;
    -o-animation: @args;
    animation: @args;
}

//公共过度
.transition(@args: all 0.3s linear) {
    -webkit-transition: @args;
    -o-transition: @args;
    -ms-transition: @args;
    -moz-transition: @args;
    transition: @args;
}

// 共用变换
.transform(@args) {
    -webkit-transform: @args;
    -moz-transform: @args;
    transform: @args;
}

// rgba(兼容ie)
#rgba(@r, @g, @b, @a) {
    @c: rgba(@r, @g, @b, @a);
    @c2 : argb(@c);
    /* for IE9 IE8 IE7 not sure about IE6*/
    filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{c2}', endColorstr='@{c2}')";
    background-color: @c;
     :root & {
        /* 
         * IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除 
         * \9 代表 IE9 以下浏览器支持
         * :root 只有 IE9+ 以及其他现代浏览器支持
         * IE10 以上不再支持 filter
        */
        filter: none;
    }
}
// exp:#rgba(0,0,0,0.1);
//透明度(兼容ie)
.opacity (@opacity) {
    @opacityPercentage: @opacity * 100;
    opacity: @opacity;
    -ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{opacityPercentage}))";
    filter:~"alpha(opacity = (@{opacityPercentage}))";
}

//css3帧动画
.keyframes (@name, @frames) {
    @-webkit-keyframes @name {
        @frames();
    }
    @-moz-keyframes @name {
        @frames();
    }
    @-ms-keyframes @name {
        @frames();
    }
    @-o-keyframes @name {
        @frames();
    }
    @keyframes @name {
        @frames();
    }
}
//例子
// .keyframes (line, {  
//     0%{background-size:0% 2px;}  
//     100%{background-size:100% 2px;}  
// }); 
// css3背景大小
.backgroundSize(@size: contain) {
    -webkit-background-size: @size; // 某些android 例如 Ophone 要加上 -webkit 的前缀  
    -moz-background-size: @size;
    -ms-background-size: @size;
    -o-background-size: @size;
    background-size: @size;
    background-position: center center;
    background-repeat: no-repeat;
}

// ie盒子模型
.borderbox {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

// 段落两端对齐
.justify {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}
// 设置placeholder字体颜色(需要在input父盒子上设置)
.placeholder(@args: #ccc) {
     ::-webkit-input-placeholder {
        color: @args;
    }
     :-moz-placeholder {
        color: @args;
    }
     ::-moz-placeholder {
        color: @args;
    }
     :-ms-input-placeholder {
        color: @args;
    }
}

// 重载函数  
.vendor(@property, @value) {
    -webkit-@{property}: @value;
    -khtml-@{property}: @value;
    -moz-@{property}: @value;
    @{property}: @value;
}

.vendor(@property, @value, @value2) {
    -webkit-@{property}: @value, @value2;
    -khtml-@{property}: @value, @value2;
    -moz-@{property}: @value, @value2;
    @{property}: @value, @value2;
}
/*背景渐变
@start  渐变开始颜色
@end  结束颜色
*/

// 垂直渐变(从上到下)
.gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: -ms-linear-gradient(top, @startColor, @endColor);
    background: -o-linear-gradient(top, @startColor, @endColor);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor ,
    endColorstr=@endColor , grandientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor ,
    endColorstr=@endColor , grandientType=0);
}

// 水平渐变(从左到右)
.horizontal-gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(left, @startColor, @endColor);
    background-image: -moz-linear-gradient(left, @startColor, @endColor);
    background-image: -ms-linear-gradient(left, @startColor, @endColor);
    background-image: -o-linear-gradient(left, @startColor, @endColor);
    background-image: linear-gradient(left, @startColor, @endColor);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor ,
    endColorstr=@endColor , GradientType=1);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor ,
    endColorstr=@endColor , GradientType=1);
}

.my-inline-block {
    display: inline-block;
    font-size: 0;
} // &:extend(.my-inline-block);

/*--------------------------------------------- 图片固定高度背景图片 ------------------------------------------*/


/*<div class="fast-image"> 
    <div class="fast-contain" style:"background-image: url(images/...);"> 
</div>*/

// 背景图片覆盖
.fastBg(@args: cover) {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: @args;
}

// 背景图片高度
.fast-image(@args) {
    width: 100%;
    height: @args;
    display: block;
    overflow: hidden;
    position: relative;
}

/*--------------------------------------------- 布局样式2018.2.26新增合并 ------------------------------------------*/

// 盒子宽高  
.size(@w, @h) {
    width: @w;
    height: @h;
}

// 最小尺寸, 兼容IE6  
.min-width(@min-w) {
    min-width: @min-w;
    _width: @min-w;
}
.min-height(@min-h) {
    min-height: @min-h;
    _height: @min-h;
}

// 内联块级元素, 兼容IE6  
.dib() {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

// 固定定位, 兼容IE6  
.fixed() {
    position: fixed;
    _position: absolute;
    *zoom: 1;
}

// 统一盒模型  
.border-box() {
    *,
    *:after,
    *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}

// 文字图片居中  
.center(text-x) {
    text-align: center;
}
.center(text-y) {
    display: table-cell;
    vertical-align: middle;
}

// 块级元素水平居中  
.center(auto-x) {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

// 居中, 不确定尺寸, 不兼容 IE6  
.center(unknown) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.center(unknown-x) {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.center(unknown-y) {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

// 居中, 确定尺寸, 兼容 IE6  
.center(known, @w, @h) {
    .size(@w, @h);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -(@w / 2);
    margin-left: -(@h / 2);
}
.center(known-x, @w) {
    width: @w;
    position: absolute;
    left: 50%;
    margin-left: -(@h / 2);
}
.center(known-y, @h) {
    height: @h;
    position: absolute;
    top: 50%;
    margin-top: -(@w / 2);
}

// 居中, CSS3 平移方式, 兼容性不行  
.center(translate) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 居中, Flex 方式, 兼容性不行  
.center(flex) {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 多个子项布局  
.list(float, @w: 25%) {
    float: left;
    width: @w;
}
.list(inline, @w: 25%) {
    .dib();
    width: @w;
}
.list(flex) {
    flex: 1;
}

// 遮罩层, 全屏遮罩、区域遮罩  
.over-screen(fixed) {
    .fixed();
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.over-screen(absolute) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

// 模糊  
.blur(@blur: 10px) {
    filter: blur(@blur);
    -webkit-filter: blur(@blur);
    -moz-filter: blur(@blur);
    -o-filter: blur(@blur);
    -ms-filter: blur(@blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='@{blur}');
    *zoom: 1;
}

// 三维闪动 bug 处理  
.transform-fix() {
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

// 三角形  
.triangle(@width: 4px, @color: #000) {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: @width solid @color;
    border-left: @width solid transparent;
    border-right: @width solid transparent;
}

.arrow(top, @w: 10px, @color, @x: 50%) {
    position: relative;
    &:before {
        position: absolute;
        bottom: 100%;
        left: @x;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-style: solid;
        border-color: transparent;
        border-bottom-color: @color;
        border-width: unit(@w, px);
        @margin: -@w;
        margin-left: unit(@margin, px);
    }
}
.arrow(right, @w: 10px, @color, @y: 50%) {
    position: relative;
    &:before {
        position: absolute;
        left: 100%;
        top: @y;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-style: solid;
        border-color: transparent;
        border-left-color: @color;
        border-width: unit(@w, px);
        @margin: -@w;
        margin-top: unit(@margin, px);
    }
}
.arrow(bottom, @w: 10px, @color, @x: 50%) {
    position: relative;
    &:before {
        position: absolute;
        top: 100%;
        left: @x;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-style: solid;
        border-color: transparent;
        border-top-color: @color;
        border-width: unit(@w, px);
        @margin: -@w;
        margin-left: unit(@margin, px);
    }
}
.arrow(left, @w: 10px, @color, @y: 50%) {
    position: relative;
    &:before {
        position: absolute;
        right: 100%;
        top: @y;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-style: solid;
        border-color: transparent;
        border-right-color: @color;
        border-width: unit(@w, px);
        @margin: -@w;
        margin-top: unit(@margin, px);
    }
}


